<%= render_card title: "Notifications", footer: render_button(text: "Mark all as read", class:
"w-full") do %>
<div class="p-6 pt-0 grid gap-4">
  <div class="flex items-center space-x-4 rounded-md border p-4">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="lucide lucide-bell-ring">
      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
      <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
      <path d="M4 2C2.8 3.7 2 5.7 2 8"></path>
      <path d="M22 8c0-2.3-.8-4.3-2-6"></path>
    </svg>
    <div class="flex-1 space-y-1">
      <p class="text-sm font-medium leading-none">Push Notifications</p>
      <p class="text-sm text-muted-foreground">Send notifications to device.</p>
    </div>
    <button
      type="button"
      role="switch"
      aria-checked="false"
      data-state="unchecked"
      value="on"
      class="peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input">
      <span
        data-state="unchecked"
        class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"></span>
    </button>
  </div>
  <div>
    <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
      <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
      <div class="space-y-1">
        <p class="text-sm font-medium leading-none">Your call has been confirmed.</p>
        <p class="text-sm text-muted-foreground">1 hour ago</p>
      </div>
    </div>
    <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
      <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
      <div class="space-y-1">
        <p class="text-sm font-medium leading-none">You have a new message!</p>
        <p class="text-sm text-muted-foreground">1 hour ago</p>
      </div>
    </div>
    <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
      <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
      <div class="space-y-1">
        <p class="text-sm font-medium leading-none">Your subscription is expiring soon!</p>
        <p class="text-sm text-muted-foreground">2 hours ago</p>
      </div>
    </div>
  </div>
</div>
<% end %>
